<template>
  <div class="main">
    <div class="bigTitle"></div>
    <div class="w">
      <div class="newsList">
        <div class="leftBox">
          <h3>{{ detais.title }}</h3>
          <span>发布时间：{{ detais.pubtime }}</span>
          <p v-html="detais.content">
            {{ detais.content }}
          </p>
        </div>
        <div class="rightBox">
          <div class="lanmu">
            <div class="title">栏目列表</div>
            <ul>
              <li v-for="(item, index) in types" :key="index">
                <i class="el-icon-arrow-right"></i>{{ item.name }}
              </li>
            </ul>
          </div>
          <div class="hotList">
            <div class="title">推荐内容</div>
            <ul>
              <router-link
                :to="{ path: '/newsDetaisl/' + item.id }"
                v-for="item in hot"
                :key="item.id"
              >
                <li>
                  <p>{{ item.title }}</p>
                  <span>{{ item.pubtime }}</span>
                </li>
              </router-link>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import { ARTICLE, ARTICLECA } from "@/api/api";
import { _axios } from "@/api/_axios";
export default {
  name: "index",
  components: {
    Header,
    Footer,
  },

  data() {
    return {
      hot: [],
      types: [],
      detais: "",
    };
  },
  watch: {
    $route: {
      handler(val, oldval) {
        if (val.params.id != oldval.params.id) {
          this.getArticle();
          this.getArticleCa();
          this.getHot();
          document.body.scrollTop = document.documentElement.scrollTop = 0;
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  mounted() {
    this.getArticle();
    this.getArticleCa();
    this.getHot();
  },
  methods: {
    getArticle() {
      let id = this.$route.params.id;
      _axios(ARTICLE + "/" + id, {}, "get").then((res) => {
        if (res.code == 0) {
          console.log(res, "ffffffff");
          this.detais = res.data;
        }
      });
    },
    getArticleCa() {
      _axios(
        ARTICLECA,
        {
          type: "news",
        },
        "get"
      ).then((res) => {
        console.log(res, "文章分类");
        if (res.code == 0) {
          this.types = res.data;
        }
      });
    },
    getHot() {
      _axios(
        ARTICLE,
        {
          page: 1,
          limit: 5,
          recommend: 1,
          type: "news",
        },
        "get"
      ).then((res) => {
        // console.log(res,'推荐')
        if (res.code == 0) {
          this.hot = res.data;
        }
      });
    },
  },
};
</script>


<style scoped>
.bigTitle {
  width: 100%;
  height: 260px;
  background-color: #eee;
  text-align: center;
  padding-top: 116px;
  box-sizing: border-box;
  background: url(../assets/news.png) no-repeat;
  background-size: 100% 100%;
}

.newsList {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
.newsList .leftBox {
  width: 850px;
  background-color: #fff;
  padding: 60px 45px;
  box-sizing: border-box;
}
.newsList .leftBox h3 {
  font-size: 22px;
  color: #333333;
  text-align: center;
}
.newsList .leftBox span {
  display: block;
  width: 100%;
  font-size: 14px;
  color: #999999;
  text-align: center;
  margin: 10px 0 50px;
}
.newsList .leftBox p {
  font-size: 16px;
  color: #333333;
}
.newsList .rightBox {
  width: 330px;
  background-color: #fff;
}
.listBox {
  padding-bottom: 35px;
  border-bottom: 1px solid #dfdfdf;
}
.listBox .title {
  font-size: 24px;
  color: #333333;
}
.listBox .type {
  width: 100px;
  font-size: 14px;
  color: #999999;
  border-bottom: 2px solid #999999;
  margin: 18px 0 20px;
  padding-bottom: 10px;
}
.listBox .detaisl {
  font-size: 14px;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 36px;
}
.rightBox {
  padding: 40px;
  box-sizing: border-box;
}
.rightBox .title {
  font-size: 16px;
  color: #333333;
  padding-bottom: 20px;
  border-bottom: 1px solid #dfdfdf;
}
.rightBox .lanmu {
  margin-bottom: 50px;
}
.rightBox .lanmu li {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #dfdfdf;
  font-size: 14px;
  color: #333333;
}
.rightBox .lanmu li i {
  margin-right: 5px;
}
.rightBox .hotList li {
  padding: 15px 0;
  border-bottom: 1px solid #dfdfdf;
}
.rightBox .hotList li p {
  font-size: 14px;
  color: #333333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.rightBox .hotList li span {
  font-size: 12px;
  color: #999999;
}
</style>
